<template>
	<div class="content-box add-good-argument">
		<el-form ref="formRef" class="good-service-form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="商品图片" prop="productUrl">
				<uploadImage v-model:file-list="form.productUrl" :limit="1" :fileSize="300 / 1024" packageName="content">
					<template #tip> 建议尺寸：800*800像素，300kb以下，支持PNG/JPG格式 </template>
				</uploadImage>
			</el-form-item>
			<el-form-item label="商品名称" prop="productName">
				<el-input v-model="form.productName" :maxlength="30" />
			</el-form-item>
			<el-form-item label="商品排序" prop="order">
				<el-input-number
					class="num-left"
					@blur="
						() => {
							form.order = form.order || 0;
						}
					"
					:max="999999999"
					:min="0"
					:controls="false"
					v-model="form.order"
				/>
			</el-form-item>
			<el-form-item label="图鉴信息" prop="details">
				<el-button type="primary" link class="mb15 mt6" @click="openUpdate()">+ 新增图鉴</el-button>
				<el-table class="form-table" :data="sortDetails">
					<el-table-column label="年份" prop="year" align="center"> </el-table-column>
					<el-table-column label="防伪图鉴" prop="productUrl" align="center">
						<template #default="scope">
							<el-image
								style="width: 100px; height: 100px"
								:src="scope.row.productUrl[0].url"
								:preview-src-list="[scope.row.productUrl[0].url]"
								:initial-index="4"
								fit="cover"
							/>
						</template>
					</el-table-column>
					<el-table-column label="排序" prop="order" align="center"> </el-table-column>
					<el-table-column label="操作" align="center">
						<template #default="scope">
							<el-button type="primary" link @click="openUpdate(scope)"> 编辑 </el-button>
							<el-button type="primary" link @click="delDetailItem(scope)"> 删除 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label-width="0">
				<div class="flex-start w-full">
					<el-button @click="back">取消</el-button>
					<el-button type="primary" v-debounce="onSubmit">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
		<AddItem :visible="updateVisible" :row="updateRow" @handleClose="handleClose"></AddItem>
	</div>
</template>

<script setup lang="tsx" name="addGoodAntiFaket">
import { FormRules, ElMessage } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { fetchCreateAntiFake, fetchUpdateAntiFake, fetchAntiFakeDetail } from '/@/api/content';
import uploadImage from '/@/components/upload/image.vue';
import AddItem from './dialog/addItem.vue';
const route = useRoute();
const router = useRouter();

const formRef = ref();
const form = ref<any>({
	productName: '',
	order: 0,
	productUrl: [],
	details: [],
});

const editId = ref();

const updateVisible = ref(false);
const updateRow = ref();

const openUpdate = (scope?: any) => {
	updateVisible.value = true;
	if (scope) {
		updateRow.value = {
			...scope.row,
			index: scope.$index,
		};
	}
};

const sortDetails = computed(() => {
	return form.value.details.sort((a: any, b: any) => {
		return b.order - a.order;
	});
});

//校验规则
const rules = reactive<FormRules<any>>({
	productName: [{ required: true, trigger: 'blur', message: '商品名称不能为空' }],
	productUrl: [{ required: true, trigger: 'blur', message: '商品图片不能为空' }],
	details: [{ required: true, trigger: 'blur', message: '参数详情不能为空' }],
});

const onSubmit = async () => {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			const params = { ...form.value };
			params.productUrl = params.productUrl.map((item: any) => item.url).join();
			params.details = params.details.map((item: any) => {
				return {
					...item,
					productUrl: item.productUrl.map((item: any) => item.url).join(),
				};
			});
			const res = editId.value ? await fetchUpdateAntiFake(params) : await fetchCreateAntiFake(params);
			if (res.code == 200) {
				ElMessage.success(editId.value ? '编辑防伪图鉴成功' : '新增防伪图鉴成功');
				back();
			} else {
				ElMessage.error(res.msg);
			}
		}
	});
};

const back = () => {
	router.push('/content/anti-fake');
};
const handleClose = (data: any) => {
	updateVisible.value = false;

	if (data) {
		if (updateRow.value) {
			form.value.details.splice(updateRow.value.index, 1, data);
		} else {
			form.value.details.push(data);
		}
	}
	updateRow.value = null;
};
const delDetailItem = (scope: any) => {
	form.value.details.splice(scope.$index, 1);
};

onMounted(async () => {
	editId.value = route.params.id;
	if (editId.value) {
		const res = await fetchAntiFakeDetail({ id: editId.value });
		if (res.code === 200) {
			const data = res.data;
			data.productUrl = data.productUrl.split(',').map((item: any) => {
				return {
					url: item,
				};
			});
			data.details = data.details.map((item: any) => {
				return {
					...item,
					productUrl: item.productUrl.split(',').map((item: any) => {
						return {
							url: item,
						};
					}),
				};
			});
			form.value = res.data;
		}
	}
});
</script>

<style lang="scss">
.add-good-argument {
	.el-form-item {
		.el-input,
		.el-select,
		.el-input-number {
			width: 100%;
			max-width: 450px;
		}
	}
	.el-table {
		.el-form-item {
			width: 80%;
			max-width: 150px;
			margin: auto;
		}
	}
}
</style>
